<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #imglist{
            width: 98%;
            padding: 10px;
            border: 3px solid #0a0;
        }
        #imglist img{
            width: 150px;
            height: 250px;
        }
        #imglist img.selected{
            border: 5px solid #f00;
            width: 140px;
            height: 240px;
        }
    </style>
    <script src="../../jquery-3.3.1.min.js"></script>
</head>
<body>
    <h1>JQ 文档操作</h1>


    <button>append</button>
    <button>appendTo</button>
    <button>prepend</button>

    <button>after</button>
    <button>insertAfter</button>
    <button>before</button>

    <button>wrap</button>
    <button>wrapAll</button>

    <button>replaceWith</button>
    <button>replaceAll</button>

    <button>remove</button>
    <button>empty</button>

    <hr>
    
    <div id="imglist">
        <img src="./imgs/mm001.jpg">
        <img src="./imgs/mm002.jpg">
        <img src="./imgs/mm003.jpg">
        <img src="./imgs/mm004.jpg">
        <img src="./imgs/mm005.jpg">
        <img src="./imgs/mm006.jpg">
        <img src="./imgs/mm007.jpg">
        <img src="./imgs/mm008.jpg">
        <img src="./imgs/mm009.jpg">
        <img src="./imgs/mm010.jpg">
        <img src="./imgs/mm011.jpg">
        <img src="./imgs/mm012.jpg">
        <img src="./imgs/mm013.jpg">
        <img src="./imgs/mm014.jpg">
        <img src="./imgs/mm015.jpg">
    </div>

    <hr>
    <p>韩国763例感染在医院和军营扩散，世卫组织：坚信韩国能克服新冠疫情</p>
    

    <script>
        $('button').click(function (){
            // 创建img对象
            // var img = '<img src="./imgs/mm016.jpg" width="200" id="myimg">';
            // console.log($('<img src="./imgs/mm016.jpg">'));
            var img = $('<img src="./imgs/mm016.jpg">');

            switch ($(this).html()) {
                case 'append': $('#imglist').append(img);break;
                case 'appendTo': img.appendTo('#imglist');break;
                case 'prepend': $('#imglist').prepend(img);break;

                case 'after': $('#imglist').after(img);break;
                case 'insertAfter': $(img).insertAfter('#imglist');break;
                case 'before': $('#imglist').before(img);break;

                case 'wrap': $('#imglist img').wrap('<li>');break;
                case 'wrapAll': $('#imglist img').wrapAll('<li>');break;

                // case 'replaceWith': $('#imglist img.selected').replaceWith(img);break;
                // case 'replaceAll': img.replaceAll('#imglist img.selected');break;

                case 'replaceWith': $('#imglist img').replaceWith(img);break;
                case 'replaceAll': img.replaceAll('#imglist img');break;
                
                case 'remove': $('#imglist img.selected').remove();break;
                case 'empty': $('#imglist').empty();break;
            }
        })

        $('p').wrapInner('<b>');

        // 选中效果, 只允许选一张
        $('#imglist img').click(function(){
            $(this).addClass('selected')
            .siblings('img').removeClass('selected');
        })



    </script>
</body>
</html>